<template>
  <el-button size="small" type="primary" @click="handleAdd">添加</el-button>
  <el-form ref="dataForm" :model="formData" class="product-param-form">
    <el-row v-for="(item, index) in formData" :key="index" class="product-param-row" :gutter="10">
      <el-col :span="11">
        <el-form-item :rules="[{ required: true, message: '参数名不能为空' }]" :prop="[String(index), 'paramName']">
          <el-autocomplete
            v-model="item.paramName"
            :fetch-suggestions="queryAttr"
            placeholder="参数名"
            clearable
            @select="(item: ShopDictTreeVo) => handleAttrSelect(item, index)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1" class="product-param-row-inline">:</el-col>
      <el-col :span="11">
        <el-form-item :rules="[{ required: true, message: '参数值不能为空' }]" :prop="[String(index), 'paramValue']">
          <el-autocomplete
            v-model="item.paramValue"
            :fetch-suggestions="(queryString: string, cb: any) => querySearch(queryString, cb, index)"
            clearable
            placeholder="参数值"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1" class="product-param-row-inline cursor-pointer">
        <IconifyIconOffline icon="ep:delete" class="product-param-del" @click="handleDelete(index)" />
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { PropType, ref, shallowReactive, shallowRef, useTemplateRef, nextTick } from "vue";
import { useSubmitFormItem, MPageRegion as PageRegion, buildSubmitFormItem } from "page-com";
import { getCombinations } from "@/utils/utils";
import { getDictTree } from "@/api/system/dictApi";
import { accessTree } from "@/utils/tree";
const dataFormRef = useTemplateRef("dataForm");

const formData = ref<ShopProductAddParamVo[]>([]);
const addSubmitFormItem = useSubmitFormItem();
const { validate, clear, getData, getKeys } = buildSubmitFormItem(formData, dataFormRef);
const handleAdd = () => {
  formData.value.push({
    paramName: "",
    paramValue: ""
  });
};
const handleDelete = (index: number) => {
  formData.value.splice(index, 1);
};
function getParamData() {
  return { params: getData() };
}
let dicts = new Map<string, ShopDictTreeVo[]>();
let suggestions: ShopDictTreeVo[] = [];
let attrMap = new Map<number, ShopDictTreeVo[]>();
getDictTree("商品参数").then(v => {
  if (RESPONSE_CODE.SUCCESS == v.code) {
    suggestions = v.data.find(val => val.value == "商品参数")?.children ?? [];
    accessTree(suggestions, v => dicts.set(v.value, v.children));
  }
});
const queryAttr = (queryString: string, cb: any) => {
  const results = queryString ? suggestions.filter(createFilter(queryString)) : suggestions;
  cb(results);
};
const querySearch = (queryString: string, cb: any, index: number) => {
  let tpl = attrMap.get(index);
  const results = queryString ? tpl.filter(createFilter(queryString)) : tpl;
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: { value: string }) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};
function handleAttrSelect(value: ShopDictTreeVo, index: number) {
  attrMap.set(index, value.children);
}
defineExpose({ clear, getData, validate });
addSubmitFormItem({ clear, getData: getParamData, validate, getKeys });
</script>
<style lang="scss">
.product-param-form {
  margin-top: 10px;
}
.product-param-row {
  width: 50%;
}
.product-param-del {
  cursor: pointer;
}
.product-param-row-inline {
  height: 32px;
  align-self: flex-start;
  text-align: center;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
</style>
